<template>
  <div class="departments">
    <el-card class="card">
      <template #header>
        <div>组织结构</div>
      </template>
      <TreeItem :item="toInfo" :is-top="true" />
      <hr>
      <el-tree :data="treeData" :props="{ label: 'name' }" default-expand-all>
        <template v-slot="{ data }">
          <TreeItem :item="data" style="width: 100%" @getData="getData" />
        </template>
      </el-tree>
    </el-card>
    <!-- 弹出框 -->
    <Dialog :in_fo="inFoList" @getData="getData" />
  </div>
</template>

<script>
import { companyDepartmentAPI } from '@/api'
import TreeItem from './conponents/TreeItem.vue'
export default {
  components: {
    TreeItem,
    Dialog: () => import('./conponents/dialog.vue')
  },
  data() {
    return {
      toInfo: {
        name: '传智教育',
        manager: '负责人',
        id: ''
      },
      // 转换成树形数据
      treeData: [],
      isshow: false,
      // 列表原始数据
      inFoList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await companyDepartmentAPI()
      this.toInfo.name = res.data.companyName
      this.inFoList = res.data.depts
      this.treeData = this.changeData(res.data.depts, '')
    },
    // 用递归的方法把数组转换成树形结构
    changeData(arr, pid = '') {
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss">
.departments {
  padding: 15px;
  .card {
    padding: 0 15px;
  }
  .TOP .other-content {
    padding: 0;
  }
}
</style>
